<template>
  <div>
    <!--工具类-->
    <Row style="padding-top: 10px;text-align: left" >
      <i-col span="24" class-name="y_query_right">

          <Input v-model.trim="searchParams.userName" placeholder="请输入用户名" class="y_condition" clearable></Input>
          <DatePicker type="date" v-model="searchParams.orderStartDate" format="yyyy-MM-dd" class="y_condition" placeholder="选择起始日期"></DatePicker> -
          <DatePicker type="date" v-model="searchParams.orderEndDate" format="yyyy-MM-dd" class="y_condition" placeholder="选择结束日期"></DatePicker>
          <Button type="primary" class="y_condition" icon="ios-search" @click="search">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :columns="tableTitles" :data="orderList" class="table_css" no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="orderList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in orderList">
        <div style="width:100%;"  >
          <Row type="flex" justify="space-between" >
            <i-col :xs="2" :sm="2" :md="1" style="padding:0.3rem 0;">
              <KeyValueView>#{{index+1}}</KeyValueView>
            </i-col>
            <i-col :xs="22" :sm="22" :md="23" style="text-align: left;" >
              <div style="width:100%;padding:0.3rem 0;">
                <KeyValueView title="订单流水号">{{item.serialNumber}}</KeyValueView>
                <KeyValueView title="用户">
                  <Tooltip :content="item.userName" placement="top">
                    {{isEmpty(item.userName)?"":$tiyHideUsername(item.userName)}}
                  </Tooltip>
                </KeyValueView>
                <KeyValueView title="国家">{{item.countryName}}</KeyValueView>
              </div>
              <div style="width:100%;padding:0.3rem 0;">
                <KeyValueView title="注册时间" >{{ $tiyBJTime(item.registertime) }}</KeyValueView>
                <KeyValueView title="交易时间">{{ $tiyBJTime(item.checkoutTime) }}</KeyValueView>
                <KeyValueView title="订单状态">{{orderStateDict.find(i => i.value == item.orderState)==null?'':orderStateDict.find(i => i.value == item.orderState).name}}</KeyValueView>
              </div>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/firstOrder/first_order_data"
  import {isEmpty} from "../js/commonUtils";
  import {
    init,
    webList
  } from "./js/firstOrder/first_order_funs"
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {ICol,KeyValueView},
    data(){
      return {
        tPage: tiyData.tPage,
        //权限
        role: tiyData.tRole,
        //搜索条件
        searchParams: tiyData.tParams,
        //字典 订单状态
        orderStateDict: this.$store.getters.dictionaries.orderStateDict,
        tData: tiyData.tData,
        orderList: tiyData.tData.orderList,
        tableTitles: [
          tiyData.tTable.tableMain.tableRowIndex,
          tiyData.tTable.tableMain.tableRowNumber,
          tiyData.tTable.tableMain.tableRowUser,
          tiyData.tTable.tableMain.tableRowCountry,
          tiyData.tTable.tableMain.tableRegisterTime,
          tiyData.tTable.tableMain.tableOrderTime,
          tiyData.tTable.tableMain.tableRowState(this)
        ]
      }
    },
    computed : {

    },
    methods: {
      isEmpty(val) {
        return isEmpty(val);
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_form_input {
    width: 180px;
    margin-right: 10px;

  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
